<template lang="pug">
  div.boxx
    el-card(
      v-if="$route.path === '/finance'"
      shadow="never"
      style="border: none"
      :bodyStyle="{border: 'none', padding: '30px'}"
    )
      data-statics.dataStatics
      trend-echarts(style="margin-top: 80px")
      <!--section.panel-->
        <!--h2-->
          <!--| 学校数据列表-->
          <!--.extra-->
            <!--el-button(:class="{'gradientVertical': schoolType === 'month'}" round @click="choseSchoolType('month')") 月-->
            <!--el-button(:class="{'gradientVertical': schoolType === 'season'}" round @click="choseSchoolType('season')") 季-->
            <!--el-button(:class="{'gradientVertical': schoolType === 'year'}" round @click="choseSchoolType('year')") 年-->
        <!--s-table(-->
          <!--ref="schoolTable"-->
          <!--:reqUrl="schoolTable.reqUrl"-->
          <!--:column="schoolTable.column"-->
          <!--:queryPropsParams="{ type: schoolType }"-->
        <!--)-->
    router-view(v-else)
</template>
<script>
import { schoolColumn } from './config'
import TrendEcharts from './components/trendEcharts'
import DataStatics from './components/dataStatics'

export default {
  components: {
    TrendEcharts,
    DataStatics
  },
  data () {
    return {
      schoolType: 'month', // 学校数据列表查询周期类型，月-month，季-season，年-year
      schoolTable: {
        column: schoolColumn,
        reqUrl: ''
      }
    }
  },
  methods: {
    // 切换学校周期筛选条件
    choseSchoolType (type) {
      this.schoolType = type
      this.$refs.schoolTable.refresh(true)
    }
  }
}
</script>
<style lang="scss" scoped>
.boxx{
  ::v-deep{
    .el-card{
      background-color: transparent;
    }
    .el-card__body{
      padding: 0 !important;
    }
  }
}
.panel{
  + .panel{
    margin-top: 80px
  }

  > h2 {
    margin: 0;
    position: relative;
    padding-left: 20px;
    font-size: 22px;
    height: 22px;
    line-height: 22px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333333;
    line-height: 24px;

    &::before{
      content: '';
      position: absolute;
      width: 10px;
      top: 0;
      bottom: 0;
      left: 0;
      background: #DA473A;
      display: block;
    }

    .extra {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
    }

    .trendType{
      position: absolute;
      right: 50%;
      top: 50%;
      transform: translateY(-50%);
    }
  }

}

.dataStatics{
  ::v-deep{
    .home-part{
      padding: 0;

      + .home-part{
        margin-top: 80px
      }
    }
  }
}
</style>
